<template>
  <div>
    <SwModal
      @register="registerModalPassword"
      title="修改密码"
      :zIndex="1010"
			:minHeight="100"  
			width="30%"
      :bodyStyle="{ color: '#000' }"
    >
      <BasicForm
        :schemas="schemas"
				@register="registerSerach"
        ref="formElRef"
        :showAdvancedButton="false"
        :showActionButtonGroup="false"
      />
      <template #modalFooter>
        <div>
          <Button @click="cancel">取消</Button>
          <Button type="primary" class="btn" @click="submitHandle">保存</Button>
        </div>
      </template>
    </SwModal>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { schemas } from './data/index';
  import SwModal from '/@/businessComponents/SwModal/index.vue';
	import { BasicForm, useForm } from '/@/components/Form/index';
  import { useModal } from '/@/components/Modal';
	import { Button } from 'ant-design-vue';
  import { changePassword } from '/@/api/user/login';
  import { messageFn } from "/@/store/utils";

  const [registerModalPassword, { openModal: openModalPassword, closeModal: closeModalPassword }] =
    useModal();
	const [registerSerach, { getFieldsValue, resetFields, validate, setFieldsValue }] = useForm();
  const loadding = ref<boolean>(false);
	
  const cancel = () => {
    resetFields();
		closeModalPassword();
	};

  const submitHandle = async () => {
    try {
      const values = await validate();
      loadding.value = true;
      const params = getFieldsValue();
      if (params.new_password !== params.confirm_new_password) {
        messageFn('error', '确认新密码应与新密码保持一致');
        return;
      }
      const data = await changePassword(params);
      if (data.code === 0) {
        closeModalPassword();
        messageFn('success', data.msg || '操作成功');
      } else {
        messageFn('error', data.msg || '操作失败');
      }
    }
    finally {
      loadding.value = false;
    }
  };

	const open = () => {
		openModalPassword();
	};

	defineExpose({
    open,
  });
</script>
